import React, {useEffect, useState} from 'react'
import {
	Form,
	Row,
	Col,
	Input,
	Select,
	message,
	Upload,
	Button,
	DatePicker,
	InputNumber,
} from 'antd'
import {useModel} from 'umi'

import {PageType} from '../constant'
import Styles from './index.less'
import {modalApi} from '@/utils/modalReq'
import {getPublicDownloadUrl} from '@/service/common/upload'

const {Option} = Select

export default function ({
	pageType,
	basicsForm,
	initialValues,
	fileList,
	setFileList,
}: any) {
	const disabled = pageType === 'detail'
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const [showReplenishCount, setShowReplenishCount] = useState(false)
	const [showReplenishTerm, setShowReplenishTerm] = useState(false)
	const [showPullFee, setShowPullFee] = useState(false)
	const [replenishCost, setReplenishCost] = useState(false)
	const [newInitialValues, setNewInitialValues] = useState()

	useEffect(() => {
		const newData = {...initialValues}
		if (initialValues?.fileIds) {
			getPublicDownloadUrl([initialValues?.fileIds])
				.then((result: any) => {
					if (result?.success) {
						newData.fileIds = [
							{
								uid: result?.data?.[0]?.id?.toString(),
								name: result?.data?.[0]?.filename,
								url: result?.data?.[0]?.url,
							},
						]
						setFileList(newData.fileIds)
						setNewInitialValues(newData)
					}
				})
				.catch(() => {})
		} else {
			setNewInitialValues({...newData, fileIds: []})
		}
	}, [initialValues])

	// const secondLevel = useMemo(()=>basicsForm.getFieldValue('secondLevelType') === '1',[basicsForm])
	// const firstLevel = useMemo(()=> basicsForm.getFieldValue('firstLevelType') === 'Zy_Channel_Type',[basicsForm])

	const rewardsTypeOnchange = (value: any) => {
		setReplenishCost(false)
		setShowReplenishCount(false)
		setShowReplenishTerm(false)
		setShowPullFee(false)
		if (value === 1) {
			setReplenishCost(true)
			setShowReplenishCount(true)
		}
		if (value === 2) {
			setReplenishCost(true)
			setShowReplenishCount(true)
			setShowReplenishTerm(true)
			setShowPullFee(true)
		}
		if (value === 3) {
			setReplenishCost(true)
			setShowReplenishCount(false)
			setShowReplenishTerm(false)
			setShowPullFee(false)
		}
	}

	useEffect(() => {
		if (initialValues?.rewardsType === 1) {
			setReplenishCost(true)
			setShowReplenishCount(true)
		}
		if (initialValues?.rewardsType === 2) {
			setReplenishCost(true)
			setShowReplenishCount(true)
			setShowReplenishTerm(true)
			setShowPullFee(true)
		}
		if (initialValues?.rewardsType === 3) {
			setReplenishCost(true)
			setShowReplenishCount(false)
			setShowReplenishTerm(false)
			setShowPullFee(false)
		}
	}, [initialValues])

	const updataProps: any = {
		name: fileName,
		action: `${modalApi.common}/shopec-template-config/templateconfig/uploadFiles`,
		data: {
			modelName: 'channelSettlement',
			targetAttr: 0,
		},
		maxCount: 1,
		fileList,
		onChange(info: any) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} 上传成功`)
				setFileList(info?.fileList)
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} 上传失败`)
			}
			setFileList(info?.fileList)
		},
	}

	const setPullFee = () => {
		const replenishCosts = basicsForm.getFieldValue('replenishCost')
		const replenishTerm = basicsForm.getFieldValue('replenishTerm')

		if (replenishCosts && replenishTerm) {
			const pullFee = replenishCosts / replenishTerm
			basicsForm.setFieldValue('pullFee', Number(pullFee?.toFixed(2)))
		}
	}
	const normFile = (e: any) => {
		if (Array.isArray(e)) {
			return e
		}
		return e?.fileList
	}

	return (
		<div className={Styles.basics}>
			<div className={Styles.titleBox}>基础信息</div>
			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={basicsForm}
					initialValues={newInitialValues}
					disabled={pageType === PageType.Detail}>
					<Row>
						<Col span={8}>
							<Form.Item
								label="结算单号"
								name="replenishNo"
								rules={[{required: true}]}>
								<Input placeholder="自动生成" disabled />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label=" 类型"
								name="rewardsType"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									disabled={disabled}
									allowClear
									onChange={rewardsTypeOnchange}>
									{[
										{
											value: 1,
											name: '冲单',
										},
										{
											value: 2,
											name: '阶梯',
										},
										{
											value: 3,
											name: 'BD跟单费',
										},
									].map((item: any) => (
										<Option value={item?.value}>
											{item?.name}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>

						<Col span={8}>{}</Col>
						<Col span={8}>
							<Form.Item
								label="渠道名称"
								name="ditchName"
								rules={[{required: true}]}>
								<Input disabled />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="所属公司"
								name="orgName"
								rules={[{required: true}]}>
								{/* <TreeSelect
									showSearch
									style={{width: '100%'}}
									placeholder="请选择"
									disabled={disabled}
									fieldNames={deptAddUserNames}
									onChange={TreeSelectChange}
									treeDefaultExpandAll
									treeData={orgList}
								/> */}
								<Input disabled />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="城市"
								name="cityName"
								rules={[{required: true}]}>
								{/* <Cascader
									fieldNames={cityNames}
									options={citysList}
									placeholder="请选择"
									disabled={disabled}
									onChange={onCitysChange}
								/> */}
								<Input disabled />
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item
								label="补扣费总金额"
								name="replenishCost"
								rules={[{required: replenishCost}]}>
								<InputNumber
									placeholder="请输入"
									onBlur={setPullFee}
									onEnded={setPullFee}
								/>
							</Form.Item>
						</Col>
						{showReplenishCount && (
							<Col span={8}>
								<Form.Item
									label="补扣工作量"
									name="replenishCount">
									<InputNumber placeholder="请输入" min={1} />
								</Form.Item>
							</Col>
						)}
						{showReplenishTerm && (
							<Col span={8}>
								<Form.Item
									label="补扣总期数"
									name="replenishTerm">
									<InputNumber
										placeholder="请输入"
										min={1}
										onBlur={setPullFee}
										onEnded={setPullFee}
									/>
								</Form.Item>
							</Col>
						)}
						{showPullFee && (
							<Col span={8}>
								<Form.Item label="单期拉新费" name="pullFee">
									<InputNumber
										placeholder="请输入"
										disabled
									/>
								</Form.Item>
							</Col>
						)}
						<Col span={8}>
							<Form.Item
								label="补费理由"
								name="replenishReason"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									disabled={disabled}
									allowClear
									// onChange={subjectOnchange}
								>
									{[
										{
											value: '系统未覆盖的业务场景补费',
											name: '系统未覆盖的业务场景补费',
										},
										{
											value: '阶梯映射错误补费',
											name: '阶梯映射错误补费',
										},
										{
											value: '阶梯映射错误扣费',
											name: '阶梯映射错误扣费',
										},
										{
											value: '其它',
											name: '其它',
										},
									].map((item: any) => (
										<Option value={item?.value}>
											{item?.name}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="奖励发生时间"
								name="rewardOccurrenceDate"
								rules={[{required: true}]}>
								<DatePicker />
							</Form.Item>
						</Col>
					</Row>

					<Row>
						<Col span={12}>
							<Form.Item
								label="描述"
								name="remark"
								rules={[{required: true}]}>
								<Input.TextArea
									placeholder="请输入(最多500字)"
									rows={6}
								/>
							</Form.Item>
						</Col>
						<Col span={12}>
							<Form.Item
								name="fileIds"
								label="附件上传"
								valuePropName="fileList"
								getValueFromEvent={normFile}>
								<Upload {...updataProps}>
									{fileList?.length >= 1 ? null : (
										<Button type="link">上传</Button>
									)}
								</Upload>
							</Form.Item>
						</Col>
					</Row>
					<Form.Item
						label="1"
						name="cityName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
					<Form.Item
						label="2"
						name="orgName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
					<Form.Item
						label="3"
						name="subjectName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
				</Form>
			</div>
		</div>
	)
}
